<template>
  <div class="manual">
    <p>蓍草起卦法《周易》</p>
    <p>大衍之数五十，其用四十有九。分而为二以象两，挂一以象三，揲之以四以象四时，归奇于仂以象闰。五岁再闰，故再仂而后挂</p>
    <p>天一地二，天三地四，天五地六，天七地八，天九地十。天数五、地数五，五位相得而各有合。天数二十有五、地数三十，凡天地之数五十有五。此所以成变化而行鬼神也</p>
    <p>《乾》之策二百一十有六，《坤》之策百四十有四，凡三百六十，当期之日。二篇之策，万有一千五百二十，当万物之数也。</p>
    <p>是故四营而成易，十有八变而成卦，八卦而小成。引而伸之，触类而长之，天下之能事毕矣。显道神德行，是故可与酬酢，可与佑神矣。</p>
    <p>子曰：知变化之道者，其知神之所为乎。</p>
    <el-divider></el-divider>
    <el-button
      type="primary"
      @click="begin"
      style="background: #409EFF"
      :disabled="isShow"
    >{{buttonText}}</el-button>
    <el-button type="primary" @click="clear" style="background: #409EFF">清空</el-button>
    <!-- 结果 -->
    <div class="show">
      <div class="start">{{start}}</div>
      <div class="log">
        <div v-for="(v,i) in list" class="count" :key="i">{{v}}</div>
      </div>
      <div class="result">
        <div v-for="(v,i) in results" class="count" :key="i">{{v}}</div>
      </div>
    </div>
    <div style="clear:both;"></div>
    <div class="content" v-show="isShow">
      <div class="msg_left" style="float: left;margin-right:20px;">
        <div class="img" v-if="result_code">
          <symbol-component :symbol="result_code"></symbol-component>
        </div>
      </div>
      <div class="msg_right" v-html="result_msg" style="display: inline-block;margin-top:5px"></div>
    </div>
    <div class="ext">
      <p>互卦是本卦的2、3、4爻与3、4、5爻组成的卦;错卦是本卦的所有爻由阳变阴或者由阴变阳而形成的卦;综卦是将本卦颠倒后而得到的卦</p>
      <div class="img" v-if="result_code_h">
        <span>互卦：</span>
        <small-symbol-component :symbol="result_code_h"></small-symbol-component>
        <span>{{result_msg_h}}</span>
      </div>
      <div class="img" v-if="result_code_r">
        <span>错卦：</span>
        <small-symbol-component :symbol="result_code_r"></small-symbol-component>
        <span>{{result_msg_r}}</span>
      </div>
      <div class="img" v-if="result_code_a">
        <span>综卦：</span>
        <small-symbol-component :symbol="result_code_a"></small-symbol-component>
        <span>{{result_msg_a}}</span>
      </div>
      <div style="padding-top:10px">
        <p>变卦有六个：</p>
        <div class="img" v-if="result_code_change_1">
          <span>动初爻：</span>
          <small-symbol-component :symbol="result_code_change_1"></small-symbol-component>
          <span>{{result_msg_change_1}}</span>
        </div>
        <div class="img" v-if="result_code_change_2">
          <span>动二爻：</span>
          <small-symbol-component :symbol="result_code_change_2"></small-symbol-component>
          <span>{{result_msg_change_2}}</span>
        </div>
        <div class="img" v-if="result_code_change_3">
          <span>动三爻：</span>
          <small-symbol-component :symbol="result_code_change_3"></small-symbol-component>
          <span>{{result_msg_change_3}}</span>
        </div>
        <div class="img" v-if="result_code_change_4">
          <span>动四爻：</span>
          <small-symbol-component :symbol="result_code_change_4"></small-symbol-component>
          <span>{{result_msg_change_4}}</span>
        </div>
        <div class="img" v-if="result_code_change_5">
          <span>动五爻：</span>
          <small-symbol-component :symbol="result_code_change_5"></small-symbol-component>
          <span>{{result_msg_change_5}}</span>
        </div>
        <div class="img" v-if="result_code_change_6">
          <span>动上爻：</span>
          <small-symbol-component :symbol="result_code_change_6"></small-symbol-component>
          <span>{{result_msg_change_6}}</span>
        </div>
      </div>
    </div>
    <el-divider></el-divider>
    <!-- <div style="clear:both;"></div> -->
    <!-- 记录 -->
    <div class="records">
      <p v-for="(v,i) in records" :key="i">{{v}}</p>
    </div>
  </div>
</template>

<script>
import { getRandomData, getMsg } from '../../api/data'
import SymbolComponent from '../../components/Symbol.vue'
import SmallSymbolComponent from '../../components/SmallSymbol.vue'

export default {
  name: 'ManualView',
  components: {
    SymbolComponent,
    SmallSymbolComponent
  },
  data () {
    return {
      start: 50,
      count: 1,
      results: [],
      list: [],
      buttonText: '开始',
      records: [],
      isShow: false,
      auto: true,
      result_code: '',
      result_msg: '',
      log: [],
      result_code_h: '',
      curImg_h: null,
      result_msg_h: '',
      result_code_r: '',
      result_msg_r: '',
      result_code_a: '',
      result_msg_a: '',
      result_code_change_1: '',
      result_msg_change_1: '',
      result_code_change_2: '',
      result_msg_change_2: '',
      result_code_change_3: '',
      result_msg_change_3: '',
      result_code_change_4: '',
      result_msg_change_4: '',
      result_code_change_5: '',
      result_msg_change_5: '',
      result_code_change_6: '',
      result_msg_change_6: ''
    }
  },
  created () {
    this.clear()
  },
  methods: {
    begin () {
      // 大衍数需要-1
      if (this.start === 50) {
        this.start -= 1;
        this.buttonText = this.count + '变'
      } else {
        if (this.count <= 18) {
          getRandomData({ start: this.start, count: this.count }).then(res => {
            const { status, data, error } = res.data
            if (status === 'success') {
              // console.log(data)
              let msg = '第' + this.count + '变(' + this.start + ') '
              const r = data.random
              if (r == 1) {
                msg += '天-' + data.left + '(挂一) 地-' + data.right
              } else {
                msg += '天-' + data.left + ' 地-' + data.right + '(挂一)'
              }
              msg += ' 归奇[' + data.tmp1 + '][' + data.tmp2 + '] 剩[' + data.end + ']'
              this.records.push(msg)
              const end = data.end
              this.start = end
              this.list[this.count - 1] = end
              let i = 0;
              if (this.count % 3 === 0) {
                // 三变为一卦爻
                i = data.i - 1;
                this.results[i] = data.result
                this.start = 49
              }
              this.count += 1
              // 6卦爻后成卦
              if (i == 5) {
                this.buttonText = '成卦'
              } else {
                this.buttonText = this.count + '变'
              }
            } else {
              console.log(error)
            }
          })
        } else {
          getMsg({ code: this.results.join(',') }).then(res => {
            const { status, data } = res.data
            if (status === 'success') {
              this.isShow = true
              if (data.result_code) {
                this.result_code = data.result_code.replace('(', '').replace(')', '')
                this.result_msg_h = data.result_msg_h
                this.result_code_h = data.result_code_h.replace('(', '').replace(')', '')
                this.result_msg_r = data.result_msg_r
                this.result_code_r = data.result_code_r.replace('(', '').replace(')', '')
                this.result_msg_a = data.result_msg_a
                this.result_code_a = data.result_code_a.replace('(', '').replace(')', '')
                this.result_msg_change_1 = data.result_msg_change_1
                this.result_msg_change_2 = data.result_msg_change_2
                this.result_msg_change_3 = data.result_msg_change_3
                this.result_msg_change_4 = data.result_msg_change_4
                this.result_msg_change_5 = data.result_msg_change_5
                this.result_msg_change_6 = data.result_msg_change_6
                this.result_code_change_1 = data.result_code_change_1.replace('(', '').replace(')', '')
                this.result_code_change_2 = data.result_code_change_2.replace('(', '').replace(')', '')
                this.result_code_change_3 = data.result_code_change_3.replace('(', '').replace(')', '')
                this.result_code_change_4 = data.result_code_change_4.replace('(', '').replace(')', '')
                this.result_code_change_5 = data.result_code_change_5.replace('(', '').replace(')', '')
                this.result_code_change_6 = data.result_code_change_6.replace('(', '').replace(')', '')
                this.result_msg = ''
                if (data.result_msg) {
                  for (let key in data.result_msg) {
                    this.result_msg += data.result_msg[key].replace(/\n/g, '<br />')
                  }
                }
              }
            }
          })
        }
      }
    },
    clear () {
      this.start = 50
      this.count = 1
      this.list = Array(18).fill('?')
      this.results = Array(6).fill('?')
      this.buttonText = '开始'
      this.records = []
      this.isShow = false
      this.result_code = ''
      this.result_msg = ''
      this.result_code_h = null
      this.result_msg_h = ''
      this.result_code_r = null
      this.result_msg_r = ''
      this.result_code_a = null
      this.result_msg_a = ''
      this.result_code_change_1 = null
      this.result_code_change_2 = null
      this.result_code_change_3 = null
      this.result_code_change_4 = null
      this.result_code_change_5 = null
      this.result_code_change_6 = null
      this.result_msg_change_1 = ''
      this.result_msg_change_2 = ''
      this.result_msg_change_3 = ''
      this.result_msg_change_4 = ''
      this.result_msg_change_5 = ''
      this.result_msg_change_6 = ''
    }
  }
}
</script>

<style lang="less" scoped>
.manual {
  padding: 10px;
  min-width: 600px;
  .ext {
    .img {
      // border: 1px solid red;
      display: flex;
      padding: 5px;
    }
  }
  .show {
    width: 59%;
    height: 80px;
    // border: 1px solid red;
    margin: 5px 0;
    .start {
      display: inline-block;
      font-size: 50px;
      font-weight: bold;
    }
    .log {
      width: 590px;
      height: 30px;
      .count {
        float: left;
        width: 30px;
        height: 30px;
        // border: 1px solid #000;
      }
    }
    .result {
      .count {
        float: left;
        width: 30px;
        height: 30px;
        // border: 1px solid #000;
      }
    }
  }
}
</style>